<template>
	<!--  默认消息头 -->
	<HeadAddAndQun title="通讯录" />
	<div v-if="isShowContactList" class="tui-contact-h5" >
		<div class="tui-contact-h5-left">
			<ContactList class="tui-contact-h5-left-list" />
		</div>
	</div>
	<!-- 通讯录 右侧展示 -->
	<div
	  v-if="isShowContactInfo"
	  :class="['tui-contact-right', !isPC && 'tui-contact-h5-right']"
	  style="position: fixed; top: 0px; z-index: 999;"
	>
	  <!-- 通讯录 详情 -->
	  <ContactInfo @switchConversation="switchConversation" />
	</div>
</template>
<script lang="ts" setup>
import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
import { TUIGlobal } from '@tencentcloud/universal-api';
import { ref, watchEffect } from '/TUIKit/adapter-vue';
import { isPC, isUniFrameWork } from '/TUIKit/utils/env';
// 组件 搜索好友
import SelectFriend from './select-friend/index.vue';
// 组件 通讯录 搜索
import ContactSearch from './contact-search/index.vue';
// 组件 通讯录 列表
import ContactList from './contact-list/index.vue';
// 组件 通讯录 内容
import ContactInfo from './contact-info/index.vue';

// 加载自定义搜索组件
import HeadAddAndQun from '/pages/common/HeadAddAndQun/index.vue';
// 触发 父组件 事件
const emits = defineEmits(['switchConversation']);

const props = defineProps({
  // web/h5 single page application display format, uniapp please ignore
  displayType: {
    type: String,
    default: 'contactList', // "contactList" /  "selectFriend"
    require: false,
  },
});

const displayTypeRef = ref<string>(props.displayType || 'contactList');
// 展示 好友搜索 默认不展示
const isShowSelectFriend = ref(false);
// 展示 通讯录 列表 默认展示
const isShowContactList = ref(true);
// 展示 通讯录 信息 默认展示
const isShowContactInfo = ref(true);


// 事件监听 
watchEffect(() => {
  isShowContactList.value = props?.displayType !== 'selectFriend';
});

// 监控 用户自定义事件 自定义数据管理 CUSTOM
TUIStore.watch(StoreName.CUSTOM, {
  isShowSelectFriendComponent: (data: any) => {
    if (!isUniFrameWork && props?.displayType === 'selectFriend') {
      isShowSelectFriend.value = data;
      isShowContactList.value = false;
      return;
    }
    if (data) {
      isShowSelectFriend.value = true;
      if (isUniFrameWork) {
        displayTypeRef.value = 'selectFriend';
        TUIGlobal?.hideTabBar();
      }
    } else {
      isShowSelectFriend.value = false;
      if (isUniFrameWork) {
        displayTypeRef.value = props.displayType;
        TUIGlobal?.showTabBar()?.catch(() => { /* ignore */ });
      }
    }
  },
  currentContactInfo: (contactInfo: any) => {
    isShowContactInfo.value = isPC || (contactInfo && typeof contactInfo === 'object' && Object.keys(contactInfo)?.length > 0);
  },
});

// 切换到 对话详情  
const switchConversation = (data: any) => {
  isUniFrameWork
  && TUIGlobal?.navigateTo({
    url: '/pages/chat/index',
  });
  emits('switchConversation', data);
};

</script>
<style lang="scss" scoped>
@import "/TUIKit/assets/styles/common";

.tui-contact {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  overflow: hidden;

  &-left {
    min-width: 285px;
    flex: 0 0 24%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  &-right {
    border-left: 1px solid #f4f5f9;
    flex: 1;
    overflow: hidden;
  }
}

.tui-contact-h5 {
  position: relative;

  &-left,
  &-right {
    width: 100%;
    height: 100%;
    flex: 1;
  }

  &-right {
    position: absolute;
    z-index: 100;
  }

  &-left {
    &-list {
      overflow-y: auto;
    }
  }
}
</style>
